<template>
  <div style="margin-top: 5px;">
    <titleBox text="任务中心" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div class="top">
          <div class="top_item" style="border: 2px solid #00C5DB80; padding:5px 10px;" @click="aisbModalShow">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">AI识别</div>
            <div class="top_item_num">{{ total }}</div>
          </div>
          <!-- <div class="top_item" style="margin: 0 10px;" @click="ylyxModalShow">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">一老一小</div>
          <div class="top_item_num"></div>
        </div> -->
        </div>
        <div class="top" style="margin-top: 5px;">
          <div class="top_item">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">待处理</div>
            <div class="top_item_num">{{ countData.dcl }}</div>
          </div>
          <div class="top_item" style="margin: 0 10px;">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">处理中</div>
            <div class="top_item_num">{{ countData.clz }}</div>
          </div>
          <div class="top_item">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">已处理</div>
            <div class="top_item_num">{{ countData.ycl }}</div>
          </div>
        </div>
        <mTableAuto v-if="valueData.length > 4" :titleData="titleData" :valueData="valueData" height="130px">
        </mTableAuto>
        <mTable v-else :titleData="titleData" :valueData="valueData"></mTable>
        <!-- <ylyxModal ref="ylyxModalRef" @rowClick="rowClick"></ylyxModal> -->
        <aisbModal ref="aisbModalRef" @rowClick="rowClick" @sbxxModalShow="sbxxModalShow"></aisbModal>
        <rqxqModal ref="rqxqModalRef" @close="rqxqModalClose"></rqxqModal>
        <sjxqModal ref="sjxqModalRef" @close="sjxqModalClose"></sjxqModal>
        <sbxxModal ref="sbxxModalRef" @close="sbxxModalClose"></sbxxModal>
      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import mTable from "../mConponents/mTable.vue"
import mTableAuto from "../mConponents/mTableAuto.vue"
import ylyxModal from "../mConponents/modal/ylyxModal.vue"
import aisbModal from "../mConponents/modal/aisbModal.vue"
import rqxqModal from "../mConponents/modal/rqxqModal.vue"
import sbxxModal from "../mConponents/modal/sbxxModal.vue"
import sjxqModal from "../mConponents/modal/sjxqModal.vue"

const ylyxModalRef = ref(null)
const ylyxModalShow = () => {
  ylyxModalRef.value.show()
}
const aisbModalRef = ref(null)
const aisbModalShow = () => {
  aisbModalRef.value.show()
}
const aisbModalClose = () => {
  aisbModalRef.value.close()
}
const aiDetailModalShow = () => {
  if (valueData.value.length > 0) {
    aisbModalRef.value.close()
    sjxqModalRef.value.show(valueData.value[0])
  }
}
const aiDetailModalClose = () => {
  sjxqModalRef.value.close()
  aisbModalRef.value.show()
}
// const rqxqModalRef = ref(null)
// const rqxqModalClose = () => {
//   ylyxModalRef.value.show()
// }
// const rowClick = (e) => {
//   rqxqModalRef.value.show(e)
//   ylyxModalRef.value.close()
// }
const sjxqModalRef = ref(null)
const sjxqModalClose = () => {
  aisbModalRef.value.show()
}
const rowClick = (e) => {
  sjxqModalRef.value.show(e)
  aisbModalRef.value.close()
}

const sbxxModalRef = ref(null)
const sbxxModalClose = () => {
  aisbModalRef.value.show()
}

const sbxxModalShow = (e) => {
  aisbModalRef.value.close()
  sbxxModalRef.value.show()
}

const content = ref(null)
const height = ref(0)
const show = ref(false)

onMounted(() => {
  getCount()
  getList()
})
const total = ref(0)
const countData = ref({
  dcl: 0,
  ycl: 0,
  clz: 0,
  yyq: 0
})
const getCount = async () => {
  const res = await $api.get("/api/index/get_appeal_solve", { big_type: 4 })
  if (res.code === 1) {
    res.data.forEach(e => {
      if (e.type === 1) {
        countData.value.dcl = e.value
      } else if (e.type === 2) {
        countData.value.ycl = e.value
      } else if (e.type === 3) {
        countData.value.clz = e.value
      } else if (e.type === 4) {
        countData.value.yyq = e.value
      }
    })
  }
}

const getList = async () => {
  const res = await $api.get("/api/index/get_appeal_list", { big_type: 4 })
  if (res.code === 1) {
    res.data.data.forEach(e => {
      if (e.is_solve === "1") {
        e.state = "待处理"
      } else if (e.is_solve === "2") {
        e.state = "已处理"
      } else if (e.is_solve === "3") {
        e.state = "处理中"
      } else if (e.is_solve === "4") {
        e.state = "已逾期"
      }
    })
    total.value = res.data.total
    valueData.value = res.data.data
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}


const titleData = [
  {
    name: "内容",
    key: "appear_type",
    align: true,
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "类型",
    key: "alarm_type",
    style: {
      width: "70px"
    }
  },
  {
    name: "状态",
    key: "is_solve",
    style: {
      width: "50px"
    }
  },
  {
    name: "创建时间",
    key: "createtime",
    style: {
      width: "80px"
    }
  }
]
const valueData = ref([])
defineExpose({ aisbModalShow, aisbModalClose, aiDetailModalShow, aiDetailModalClose })
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;

  .top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .top_item {
      flex: 1;
      padding: 3px 10px 3px 3px;
      display: flex;
      align-items: center;
      background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
      border: 1px solid;
      border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 1);
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 1);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        background-image: url('/img/myimg/lefticon1.png');
        background-size: 17px 15px;
        width: 17px;
        height: 15px;
      }
    }
  }
}
</style>
